<template>
  <div class="Slider">
    <el-menu
      :default-active="unref(router.currentRoute).path.replace(/\//g, '')"
      class="el-menu-vertical-demo"
      background-color="#ebedf0"
      text-color="#000"
      active-text-color="#07c160"
      router
    >
      <template v-for="item in Navbar__">
        <template v-if="item.subs">
          <el-submenu :index="item.index" :key="item.index">
            <template #title>
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-submenu
                v-if="subItem.subs"
                :index="subItem.index"
                :key="subItem.index"
              >
                <template #title>{{ subItem.title }}</template>
                <el-menu-item
                  v-for="(threeItem, i) in subItem.subs"
                  :key="i"
                  :index="threeItem.index"
                  :disabled="threeItem.disable"
                  >{{ threeItem.title }}</el-menu-item
                >
              </el-submenu>
              <el-menu-item
                v-else
                :index="subItem.index"
                :key="subItem.index"
                :disabled="subItem.disable"
                >{{ subItem.title }}</el-menu-item
              >
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            <template #title>{{ item.title }}</template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { defineComponent, reactive, ref, unref } from 'vue'
import {
  ElMenu,
  ElMenuItem,
  ElCol,
  ElSubmenu,
  ElMenuItemGroup,
  ElIcon,
} from 'element-plus'
import { Navbar__ } from '../utils'
import router from '../router'
</script>

<style lang="scss">
@import '../assets/styles/_var.scss';
.Slider {
  flex-shrink: 0;
  height: 100%;
  width: $slider-width;
  ul {
    height: 100%;
    font-weight: bold;
    overflow: auto;
    .el-submenu__title:hover,
    .el-menu-item:hover,
    .el-menu-item:focus {
      background: $gray-1;
    }
  }
}
</style>
